<template>
  <div class="">
    <custom-form ref="form" :formModel="formModel" :formItemConfig="formItemConfig" :formRules="formRules" label-width="80px" label-position="left" />
  </div>
</template>

<script>
import { addDeviceFactorData, updateDeviceFactorData } from "@/api/system/device/factors";
import { mapState } from "vuex";
export default {
  name: "ParamsSetttings",
  props: {
    formData: {
      type: Object,
      default: () => { },
    },
    dictMap: {
      type: Object,
      default: () => { },
    },
  },
  data() {
    return {
      // 提交表单数据
      formModel: {
        // 购买日期 example: 2024-04-13 08:36:25
        buyTime: '',
        // 启用日期 example: 2024-04-13 08:36:25
        enableTime: '',
        // 有效日期
        validTime: '',
        // 排序(值越小排越前面)
        sort: '',
        // 心跳间隔(小时)
        heartbeatInterval: '',
        // 	告警间隔(分钟)
        alarmInterval: '',
        // 是否告警通知(0:是 1:否)
        alarmNoticeStatus: '',
        // 是否可控(0:是 1:否)
        controlStatus: '',
        // 物理地址
        macAddress: '',
      },
      // 表单配置项
      formItemConfig: [
        {
          label: "购买日期",
          prop: "buyTime",
          span: 12,
          component: 'BaseDateTimePicker',
          labelWidth: "120px",
          clearable: true,
          'value-format': "yyyy-MM-dd hh:mm:ss"
        },
        {
          label: "启用日期",
          prop: "enableTime",
          span: 12,
          component: 'BaseDateTimePicker',
          labelWidth: "120px",
          span: 12,
          clearable: true,
          'value-format': "yyyy-MM-dd hh:mm:ss"
        },
        {
          label: "有效日期",
          prop: "validTime",
          span: 12,
          component: 'BaseDateTimePicker',
          labelWidth: "120px",
          clearable: true,
          'value-format': "yyyy-MM-dd hh:mm:ss"
        },
        {
          label: "显示排序",
          prop: "sort",
          span: 12,
          component: "el-input-number",
          labelWidth: "120px",
          clearable: true,
          min: 0,
          controls: false,
        },
        {
          label: "心跳间隔(小时)",
          prop: "heartbeatInterval",
          span: 12,
          component: "el-input-number",
          labelWidth: "120px",
          clearable: true,
          min: 0,
          controls: false,
        },
        {
          label: "告警间隔(分钟)",
          prop: "alarmInterval",
          span: 12,
          component: "el-input-number",
          labelWidth: "120px",
          clearable: true,
          min: 0,
          controls: false,
        },
        {
          label: "是否告警通知",
          prop: "alarmNoticeStatus",
          span: 12,
          component: "BaseSelect",
          labelWidth: "120px",
          clearable: true,
        },
        {
          label: "是否可控",
          prop: "controlStatus",
          span: 12,
          component: "BaseSelect",
          labelWidth: "120px",
          clearable: true,
          min: 0,
          controls: false,
        },
        {
          label: "物理地址",
          prop: "macAddress",
          span: 24,
          labelWidth: "120px",
          clearable: true,
        },
      ],
      // 表单验证
      formRules: {
        buyTime: {
          required: true,
          message: "购买日期不能为空",
          trigger: "blur",
        },
        enableTime: {
          required: true,
          message: "启用日期不能为空",
          trigger: "blur",
        },
        validTime: {
          required: true,
          message: "有效日期不能为空",
          trigger: "blur",
        },
        heartbeatInterval: {
          required: true,
          message: "心跳间隔(小时)不能为空",
          trigger: "blur",
        },
        alarmInterval: {
          required: true,
          message: "告警间隔(分钟)不能为空",
          trigger: "blur",
        },
        alarmNoticeStatus: {
          required: true,
          message: "是否告警通知不能为空",
          trigger: ["blur", "change"],
        },
        controlStatus: {
          required: true,
          message: "是否可控不能为空",
          trigger: ["blur", "change"],
        },
        macAddress: {
          required: true,
          message: "物理地址不能为空",
          trigger: "blur",
        },
      },
    };
  },
  computed: {
    ...mapState("dialog", ["dialogTitles"]),
  },
  watch: {
    formData: {
      deep: true,
      immediate: true,
      handler() {
        let formdata = this.formData
        for(let p in this.formModel){
          let item = formdata[p]
          if(item !== undefined){
            this.formModel[p] = item
          }
        }
      },
    },
  },
  created() {
  },
  mounted() {
    this.setDictList();
  },
  methods: {
    getList() {
      this.$emit("getList");
    },
    getForm() {
      return this.$refs.form
    },
    cancel() {
      this.$emit("cancel");
      this.$refs["form"].toResetFields();
    },
    submitFrom() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.$utils.isNotEmpty(this.formModel.deviceFactorId)) {
            updateDeviceFactorData(this.formModel).then((res) => {
              if (200 === res.code) {
                this.$message({
                  message: "修改成功",
                  type: "success",
                });
                this.cancel();
                this.getList();
              }
            });
          } else {
            addDeviceFactorData(this.formModel).then((res) => {
              if (200 === res.code) {
                this.$message({
                  message: "添加成功",
                  type: "success",
                });
                this.cancel();
                this.getList();
              }
            });
          }
        }
      });
    },
    // 设置formItemConfig里面的字典列表
    setDictList() {
      if (this.dictMap) {
        // 是否告警通知
        this.formItemConfig[this.formItemConfig.findIndex(item => item.prop == 'alarmNoticeStatus')].options = this.dictMap.type.device_alarm_notice_status;
        // 是否可控
        this.formItemConfig[this.formItemConfig.findIndex(item => item.prop == 'controlStatus')].options = this.dictMap.type.device_control_status;
      }
    },
  },
  components: {},
};
</script>

<style lang="less" scoped></style>
